<script setup>
import {ref} from 'vue'
import DeliveryMapWithMark_2D from "@/views/product/components/DeliveryMapWithMark_2D.vue";

const props = defineProps({
  delivery: {type: String, default: ''},
  address: {type: String, default: ''},
  freight: {type: Number, default: 0},
})

// 收获地址面板
const floatPanelVisible = ref(false)
const anchors = ref([window.innerHeight * 0.75, window.innerHeight * 0.8])
const onOpenPanel = () => {
  floatPanelVisible.value = true
}
const onClosePanel = () => {
  floatPanelVisible.value = false
}
</script>

<template>
  <div class="product-delivery p-2 mt-2 ml-1 mr-1 rounded-lg bg-white dark:bg-neutral-900 dark:text-gray-100">
    <div class="flex justify-between items-center" @click="onOpenPanel">
      <div class="flex-center">
        <span class="iconfont icon-cangpeitubiao_fahuohuanhuofahuo mr-2 text-2xl"></span>
        <span class="text-sm">{{ delivery }}</span>
      </div>
      <div><span class="iconfont icon-you2"></span></div>
    </div>
    <div class="flex-start-center">
      <span class="iconfont icon-kuaidi mr-2 text-2xl"></span>
      <span class="text-sm">快递：{{ freight === 0.0 ? '免运费' : `￥ ${freight}` }}</span>
    </div>
    <van-overlay :show="floatPanelVisible" @click="onClosePanel" />
    <van-floating-panel
        :content-draggable="true"
        :anchors="anchors"
        v-show="floatPanelVisible"
    >
      <van-cell-group>
        <van-cell title="发货地" :value="delivery" />
        <van-cell title="详细地址" :label="address" />
      </van-cell-group>
      <DeliveryMapWithMark_2D></DeliveryMapWithMark_2D>
    </van-floating-panel>
  </div>
</template>

<style scoped lang="scss">

</style>